<template>
  <div>
    <el-dialog
      :title="editFlag ? '编辑信任模型' : '新增信任模型'"
      class="addDialog"
      :visible.sync="dialogVisible1"
      :before-close="handleClose"
      :close-on-click-modal="false"
      width="55%"
    >
      <el-form
        ref="addform"
        :model="vpnform"
        :rules="rulesVpnform"
        label-width="110px"
      >
        <el-form-item label="模型名称:" prop="modelName">
          <el-input
            v-model="vpnform.modelName"
            maxlength="256"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="信任类型:" prop="trustType">
          <el-select v-model="vpnform.trustType" :disabled="scene">
            <el-option
              v-for="item in trustTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否启用:" prop="usingStatus">
          <el-select v-model="vpnform.usingStatus">
            <el-option
              v-for="item in usingStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联风险场景:" prop="sceneId">
          <el-button type="primary" @click="changeSence"
            >请选择风险场景</el-button
          >
        </el-form-item>
        <el-form-item label="关联风险场景:" prop="sceneName">
          <template>
            {{ vpnform.sceneName ? vpnform.sceneName : "--" }}
          </template>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitaddForm('addform')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-drawer
      title="风险场景列表"
      class="sceneDialog"
      :visible.sync="sceneVisible"
      :before-close="handleSceneClose"
      :append-to-body="true"
      :wrapperClosable="false"
      custom-class="demo-drawer"
      top="20vh"
      width="55%"
    >
      <div class="demo-drawer__content">
        <HTable
          ref="table"
          :tableData="tableData"
          :columnConfigs="columnConfigs"
          @selection-change="handleSelectionChange"
          :selectable="true"
          v-loading="loading"
          :pages="pagination"
          @page-change="handlePageChange"
          @size-change="handleSizeChange"
        >
          <template slot-scope="{ row }">
            <template v-if="row.name == 'riskLevel'">
              {{ getOptionLabel(row.row.riskLevel, riskLevelList) }}
            </template>
          </template>
        </HTable>
        <div class="demo-drawer__footer">
          <el-button @click="handleSceneClose">取 消</el-button>
          <el-button type="primary" @click="submitScene">确 定</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import table from "@/mixins/commontable";
import { columnConfigs } from "./columnConfigs.js";
import { getList } from "@/api/yybl/riskScene";
export default {
  name: "rule",
  components: {},
  mixins: [table],
  props: {
    dialogVisible1: {
      type: Boolean,
      default: false,
    },
    editFlag: {
      type: Boolean,
      default: false,
    },
    scene: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      columnConfigs,
      sceneVisible: false,
      riskLevelList: [
        {
          label: "高",
          value: "1",
        },
        {
          label: "中",
          value: "2",
        },
        {
          label: "低",
          value: "3",
        },
      ],
      sceneList: [
        {
          label: "异常时间登录",
          value: "1",
        },
        {
          label: "异常IP登录",
          value: "2",
        },
      ],
      rules: [
        {
          label: "完全匹配",
          value: "0",
        },
        {
          label: "频次匹配",
          value: "1",
        },
        {
          label: "区间匹配",
          value: "2",
        },
      ],
      attrList: [
        {
          label: "IP属性",
          value: "0",
        },
        {
          label: "时间属性",
          value: "1",
        },
      ],
      trustTypeList: [
        {
          label: "用户",
          value: "1",
        },
        {
          label: "终端",
          value: "2",
        },
        {
          label: "资产",
          value: "3",
        },
      ],
      rules: [
        {
          label: "完全匹配",
          value: "0",
        },
        {
          label: "频次匹配",
          value: "1",
        },
        {
          label: "区间匹配",
          value: "2",
        },
      ],
      usingStatusList: [
        {
          label: "启用",
          value: "0",
        },
        {
          label: "停用",
          value: "1",
        },
      ],
      zhouqis: [
        {
          label: "月",
          value: "1",
        },
        {
          label: "周",
          value: "2",
        },
        {
          label: "日",
          value: "3",
        },
      ],
      fontOptions: [
        {
          value: "微软雅黑",
          label: "微软雅黑",
        },
        {
          value: "宋体",
          label: "宋体",
        },
        {
          value: "仿宋",
          label: "仿宋",
        },
        {
          value: "黑体",
          label: "黑体",
        },
        {
          value: "楷体",
          label: "楷体",
        },
        {
          value: "等线",
          label: "等线",
        },
      ],
      vpnform: {},
      rulesVpnform: {
        modelName: [
          { required: true, message: "请输入模型名称", trigger: "change" },
          //   { validator: validateIpPort, trigger: "blur" },
          // { type: "number", message: "大小必须为数字值" },
        ],
        trustType: [
          { required: true, message: "请输入信任类型", trigger: "blur" },
          // { type: "number", message: "大小必须为数字值" },
        ],
        usingStatus: [
          { required: true, message: "请选择启用状态", trigger: "change" },
          // { type: "number", message: "大小必须为数字值" },
        ],
        sceneId: [
          //   { validator: checkNumber, trigger: "blur" },
          { required: true, message: "请选择风险场景", trigger: "blur" },
          // { type: "number", message: "大小必须为数字值" },
        ],
      },
      selectTion: [],
    };
  },
  watch: {},
  computed: {
    showForm() {
      if (this.vpnform.type == 0) {
        if (this.vpnform.attr == 0) {
          return 0;
        } else if (this.vpnform.attr == 1) {
          return 1;
        } else {
          return 2;
        }
      } else {
        return 2;
      }
    },
  },
  methods: {
    getOptionLabel(val, list) {
      return list.filter((i) => i.value == val)[0]?.label;
    },
    changeSence() {
      this.sceneVisible = true;
    },
    handleSceneClose() {
      this.sceneVisible = false;
      // this.selectTion.splice(0);
      this.$refs.table.clearSelection();
      // this.vpnform.showSence = this.selectTion.map((i) => i.content).join(";");
    },
    formatTrancy(val) {
      let a = Number(val);
      return Math.round(a * 100) + "%";
    },
    formatTooltip(val) {
      return val + "%";
    },
    formatTooltipRotation(val) {
      return val + "°";
    },
    formatTooltipSize(val) {
      return val;
    },
    handleChange(val) {
      console.log(val);
    },
    add(row) {
      this.vpnform = row;
      this.$refs?.addform?.clearValidate();
    },
    edit(row) {
      const { id, usingStatus, sceneName, sceneId, modelName, trustType } =
        row;
      this.vpnform = {
        id,
        usingStatus: usingStatus + "",
        sceneName,
        sceneId,
        modelName,
        trustType: trustType + "",
      };
      this.$refs?.addform?.clearValidate();
    },
    submitaddForm() {
      console.log(this.vpnform);
      this.$refs["addform"].validate((val) => {
        console.log(val);
        if (val) {
          this.$emit("submit", this.vpnform);
        }
      });
    },
    handleClose() {
      this.$emit("update:dialogVisible1", false);
    },
    refresh() {
      this.getlists(getList, {});
      // this.tableData = [
      //   {
      //     username: "中",
      //     host: "非工作时间登录4A系统",
      //     content: "异常时间登录",
      //     font: "20",
      //   },
      // ];
      // this.pagination.total = 1;
    },
    handleSelectionChange(val) {
      console.log(val);
      this.selectTion = val;
    },
    submitScene() {
      this.vpnform.sceneName = this.selectTion.map((i) => i.sceneName).join();
      this.vpnform.sceneId = this.selectTion.map((i) => i.id).join();
      this.sceneVisible = false;
      this.$refs.table.clearSelection();
    },
  },
  created() {
    this.refresh();
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__content {
  .el-date-editor.el-input {
    width: 100%;
  }
}
.sceneDialog {
  ::v-deep .el-dialog__body {
    padding: 0px 20px 30px 20px;
  }
}

::v-deep .el-button {
  .el-icon-edit + span {
    margin-left: 0px;
  }
  .el-icon-delete + span {
    margin-left: 0px;
  }
}
::v-deep .el-dialog {
  min-width: 640px;
  .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
  }
  .el-dialog__footer {
    border-top: 1px solid #e8e8e8;
  }
}
.addDialog {
  .el-dialog {
    min-width: 640px;
  }

  .el-form {
    .el-form-item.slider {
      width: 100%;
    }
    ::v-deep.range {
      width: 100%;
      .el-form-item__content {
        display: flex;
        .timepicker {
          width: 100%;
        }
      }
    }
  }
}

::v-deep .el-drawer {
  min-width: 700px;
  .el-drawer__body {
    padding: 0 15px;
  }
  .demo-drawer__footer {
    margin-top: 16px;
    text-align: end;
  }
}
</style>
